<template>
  <div
    v-bind:style="{ minHeight: `calc(${innerHeight}px - ${tabBarHeight}px - ${navBarHeight}px)` }"
    class="index-container"
  >
    <van-nav-bar title="直播" ref="nav" />
    <div class="warpper" v-bind:style="{ marginTop: `${navBarHeight}px` }">
      <div>
        <img class="image" :src="coverImage" alt="" />
      </div>
      <div class="container">
        <div
          class="live"
          @click="() => this.to('/live/detail')"
          style="margin-bottom: 27px; margin-top: 25px; display: flex"
        ></div>
        <div class="playback" @click="() => this.to('/live/backplay')" v-if="isShow == true"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCoverimage, playbacks } from '@/api/live.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      msg: 1,
      navBarHeight: 0,
      coverImage: '',
      innerHeight: 0,
      isShow: false
    }
  },

  computed: {
    ...mapGetters(['tabBarHeight'])
  },
  mounted() {
    this.navBarHeight = this.$refs.nav.$el.offsetHeight
    this.innerHeight = window.innerHeight
    this.initData()
    this.getPlaybacks()
  },
  methods: {
    to(url) {
      this.$router.push({
        path: url
      })
    },
    getPlaybacks() {
      playbacks().then(res => {
        if (res.code === 200) {
          this.isShow = true
        } else {
          this.isShow = false
        }
      })
    },
    // 请求数据案例
    initData() {
      getCoverimage()
        .then(res => {
          if (res.code === 200) {
            const datas = res.data
            this.coverImage = datas.cover_image
            console.log(datas, 'aa')
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  padding-left: 13px;
  padding-right: 13px;

  .title {
    background-image: linear-gradient(94deg, #ffffff 0%, #504a46 100%);
    opacity: 1;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    padding-left: 22px;
    padding-top: 12px;
    font-size: 21px;
    font-weight: bold;
  }
}

.image {
  height: 240px;
  width: 100%;
  background: #dddddd;
  opacity: 1;
}

.live {
  height: 95px;
  opacity: 1;
  border-radius: 6px;
  background-image: url('../../assets/img/live/资源16.png');
  background-size: 100%;
  background-repeat: no-repeat;
}

.playback {
  background-image: url('../../assets/img/live/资源15.png');
  background-size: 100%;
  height: 95px;
  opacity: 1;
  border-radius: 6px;
  background-repeat: no-repeat;
}
</style>
